<template>


  <div class="rule-container">
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input clearable placeholder="请输入一体杆名称" v-model="params.poleName" 
      @clear="getList"   class="search-main"   size="small"  />
      <span class="search-label">一体杆编号：</span>
      <el-input clearable placeholder="请输入一体杆编号"  v-model="params.poleNumber"
      @clear="getList"   class="search-main"   size="small"  />

      <span class="search-label">处置状态：</span>
      <el-select  placeholder="请选择处置状态"  size="small" v-model="params.handleStatus">
        <el-option label="全部" :value="null" />
        <el-option label="未派单" :value="0" />
        <el-option label="已派单" :value="1" />
        <el-option label="已接单" :value="2" />
        <el-option label="已完成" :value="3" /> 
        
      </el-select>
      <el-button type="primary" size="small" class="search-btn" @click="getList">查询</el-button>

    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table :data="list" style="width: 100%">
        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName"  />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="故障类型" prop="errorType" />
        <el-table-column label="处置状态" prop="handleStatus" :formatter="formatStatus" />
        <el-table-column label="告警时间" prop="warningTime" />
        <el-table-column label="操作" fixed="right" width="180">

          <template #default="scope">
            <!-- 禁用 【plain】 disabled Boolean -->
            <el-button size="mini" disabled  type="text" >派单</el-button>
            <el-button size="mini" type="text" @click="jumpDetail(scope.row.id)">详情</el-button>
            <el-button size="mini" type="text" @click="delList(scope.row.id)">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </div>
    
    <div class="box">
     <el-pagination 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-size="params.pageSize"
      :page-sizes="[5,10,15,20,25,30]"
      layout="total, prev, pager, next, sizes"
      :total="this.total">
      </el-pagination> 
      </div>


  </div>
</template>

 
<script>
import { getPoleListAPI,delPoleListAPI } from '@/api/pole'
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
        handleStatus:'', //状态
        poleName:'',
        poleNumber:''
      },
      total: 0,
      list:[],
     
    }
  },


mounted(){
  this.getList() 
  
},

methods:{

  //跳转详情，携带id
  jumpDetail(id){
    this.$router.push('/detail?id='+id)
  },

  delList(id){
  this.$confirm('是否确认删除当前告警记录？','提示',{
    confirmButtonText:'确认',
    concelButtonText:'取消',
    type:'waning'
  }).then(async()=>{
    await delPoleListAPI(id)
    this.getList()
    this.$message.success('删除成功！')
  }).catch((error)=>{
    console.log(error)
     // 演示数据不能删除
  })
 
  },

  async getList(){
    const res = await getPoleListAPI(this.params) 
    this.list =  res.data.rows
    this.total = res.data.total
    console.log('88',res.data)
  },
  formatStatus(row){
    const status={
      0:'未派单',
      1:'已派单',
      2:'已接单',
      3:'已完成'
    }
    return status[row.handleStatus]
  },
  handleSizeChange(pageSize){ //页码条数
      this.params.pageSize=pageSize
      this.getList()
  },

  handleCurrentChange(page){
      this.params.page=page  //更新当前页码
      this.getList()
  }


}


}



</script>


<style lang="scss" scoped>

.box{
  margin-top:20px;
  //浮动  flex 弹性容器布局（快速实现子元素横向布局）
  // float:right;
  display:flex;
  //默认从左往右 从右往左（右侧开始布局）
  justify-content: flex-end;
}

.rule-container {
  padding: 15px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-label {
    font-size:14px;
  }

  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>